@import "./var.less";
.footer-box{
    position: absolute;
    bottom: 0rem;
    // background-color: red;
    height: @bottomHeight;
    width: 100%;
    border-top: 1px solid @gray-light;
    >.comment-input{
        font-size: 0.24rem;
        margin: 0.2rem;
        background-color: @gray-ee;
        height: @bottomHeight - 0.4rem;
        line-height: @bottomHeight - 0.4rem;
        border-radius: 1000rem;
        cursor: pointer;
        color: @gray;
        padding: 0rem 0.2rem;
    }
    >.comment-detail{
        position: fixed;
        bottom: 0rem;
        top: 0rem;
        left: 0rem;
        right: 0rem;
        margin: 0 auto;
        max-width: 750px;
        display: none;
        background-color:fade(black,50%);
        >.user-input{
            position: absolute;
            bottom: 0rem;
            max-height: 100%;
            left: 0rem;
            right: 0rem;
            padding: 0.2rem;
            background-color: #f8f9fa;
            overflow-y: auto;
            box-sizing: border-box;
            >h4{
                font-size: 0.28rem;
                font-weight: normal;
                // padding: 0.1rem;
                color: @gray;
                padding-bottom: 0.1rem;
            }
            >.user-head{
                list-style: none;
                font-size: 0rem;
                width: 100%;
                overflow-y: scroll;
                height: 2rem;
                background-color: #ddd;
                border-radius: 0.2rem;
                margin-bottom: 0.2rem;
                >li{
                    display: inline-block;
                    background-repeat: no-repeat;
                    width: 0.8rem;
                    height: 0.8rem;
                    margin: 0.1rem;
                    box-sizing: border-box;
                    background-size: cover;
                    border-radius: 50%;
                    vertical-align: top;
                }
                >.user-choose::after{
                    content: "";
                    background-image: url();
                    display: inline-block;
                    width: 0.8rem;
                    height: 0.8rem;
                    background-repeat: no-repeat;
                    background-size: 80%;
                    background-position: center;
                    background-color: fade(black,70%);
                    border-radius: 50%;
                }
            }
            >.user-nikename{
                box-sizing: border-box;
                border: none;
                background-color:#ddd;
                display: block;
                font-size: 0.24rem;
                padding: 0.2rem 0.2rem;
                width: 100%;
                border-radius: 0.2rem;
                outline: none;
                margin-bottom: 0.2rem;
            }
            >.reset-star{
                margin-bottom: 0.2rem;
                >span{
                    height: 0.4rem!important;
                    width: 0.4rem!important;
                    line-height: 0.4rem!important;
                }
                >.star-source{
                    font-size:0.52rem!important;
                    color: @gray!important;
                }
            }
            .user-message{
                outline: none;
                border: none;
                display: block;
                width: 100%;
                background-color:#ddd;
                font-size: 0.24rem;
                padding: 0.2rem 0.2rem;
                border-radius: 0.2rem;
                box-sizing: border-box;
                height: 2rem;
                margin-bottom: 0.2rem;
                resize: none;
            }
            .send-btn{
                color: @gray;
                font-size: 0.3rem;
                &::after{
                    content: "";
                    display: block;
                    clear: both;
                }
                >span{
                    padding: 0.1rem 0.2rem;
                    cursor: pointer;
                }
                >.span:first-child{
                    float: left;
                }
                >.span:last-child{
                    float: right;
                }
            }
        }
    }
}